<template>
  <footer class="footer">
    <span class="todo-count">剩余{{leftCount}}<strong></strong></span>
    <ul class="filters">
      <li>
        <a href="javascript:;" @click="$emit('changeType','all')"  :class="{selected:type==='all'}">全部</a>
      </li>
      <li>
        <a   href="javascript:;"  @click="$emit('changeType','no')"  :class="{selected:type==='no'}">未完成</a>
      </li>
      <li>
        <a   href="javascript:;"  @click="$emit('changeType','yes')" :class="{selected:type==='yes'}">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clear" v-show='show'>清除已完成</button>
  </footer>
</template>

<script>
export default {
        data(){
          return {
           
          }
        },
         props:{
          list:{
            type:Array
          },
          type:{
            type:String
          }
         },
         methods:{
          clear(){
            this.$emit('clear')
          },
        
         },
         computed:{
          leftCount(){
           return  this.list.filter(item=>item.isDone == false).length
          },
           show(){
             return this.list.some(item=>item.isDone)  //数组some方法,有一项为true就 返回true
         
           }
         }
      
        
}
</script>